<template>
  <div class="PageA">
    <navbar>
      <div slot="left" class="left-img">
          <img @click="fan" src="../../assets/img/la.png" />
      </div>
    </navbar>

    <div class="contentC">
      <!--头像部分-->
      <div class="Pictureframe">
        <div class="frame">
          <img :src="userInfo.avatar" />
        </div>
        <input
          type="file"
          accept="../../assets/img/*"
          @change="handleFile"
          class="hiddenInput"
        />

        <div class="setting_right" @click.stop="uploadHeadImg">
          <div class="caption">更改头像</div>
        </div>

        <div class="frameA">
          <span>小芳</span>
        </div>

        <div class="frameB">
          <span>24岁</span>
          <span>166厘米</span>
          <span>重庆江北</span>
        </div>
      </div>
      <!--内容部分-->
      <div class="tagging" v-for="item in list" :key="item.id">
        <span>{{ item.title }}</span>
        <p class="taggingA">{{ item.Text }}</p>
        <div class="taggingB">
          <div class="circle" v-for="itemson in item.arr" :key="itemson.id">
            {{ itemson.num }}
          </div>
        </div>
      </div>
      <!--详细部分-->
        <div class="tabdi" @click="Pullup">
          <div class="tabdiA">
            <img :src="imgs" alt="" />
          </div>
          <span class="tabdiB">{{ mag }}</span>
        </div>

      <!--底部按钮部分-->
      <div class="tabpA">
        <button @click="Favor">
          <span><img src="../../assets/img/xin.png" /></span>
          <span>发好感</span>
        </button>
        <button @click="Leaving">
          <span><img src="../../assets/img/xin.png" /></span>
          <span>留言</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar";
export default {
  name: "userInfo",
  components: {
    navbar,
  },
  
  methods: {
    //发好感
    Favor: function () {
      this.$toast({
        message: "已发送好感",
        duration: 3000,
      });
    },
    //留言
    Leaving: function () {
      const { power } = this.$store.state.user;
      if (power < 2) {
        alert("你的权限等级不够");
        return;
      }
      this.$toast({
        message: "正在留言",
        duration: 3000,
      });
    },
    //返回上一级
    fan() {
      this.$router.back();
    },
    Pullup() {
      this.$router.push("/userInfo/userInfoDetail");
    },
    uploadHeadImg: function () {
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile: function (e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
    },
  },
  data() {
    return {
      xialaimg: require("../../assets/img/la.png"),
      imgs: require("../../assets/img/xiala.png"),
      mag: "详细资料",
      // 初始图片
      userInfo: {
        avatar: require("@/assets/img/1.png"),
      },

      list: [
        {
          id: 1,
          title: "个人介绍",
          Text:
            " 需求已经具备，人群渐渐明晰，趋势正在到来，现在就看谁先解完这道题，给出一个最符合人们 心理的范式。",
        },
        {
          id: 2,
          title: "内心独白",
          Text:
            " 需求已经具备，人群渐渐明晰，趋势正在到来，现在就看谁先解完这道题，给出一个最符合人们 心理的范式。",
        },
        {
          id: 3,
          title: "个人验证",
          arr: [
            { id: 0, num: 1 },
            { id: 1, num: 2 },
            { id: 2, num: 3 },
            { id: 3, num: 4 },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.Pictureframe {
  display: flex;
  text-align: center;
  flex-flow: column;
  margin-top: 50px;
  height: 180px;
  background-color: bisque;
}
.frame {
  flex: 1;
  border-radius: 50px;
}
.frame img {
  border-radius: 50px;
  width: 100px;
  height: 100px;
}
.frameA {
  height: 30px;
  font-weight: 600;
}
.frameB {
  height: 40px;
  font-weight: 600;
}
.tagging {
  display: flex;
  flex-flow: column;
  height: 100px;
}
.tagging span {
  margin: 10px 15px 10px 10px;
  text-align: left;
}
.taggingA {
  margin: 0;
  color: rgb(202, 202, 202);
  text-align: left;
  margin: 0 10px 0 10px;
}
.taggingB {
  display: flex;
  flex-flow: row;
}
.circle {
  flex: 1;
  height: 70px;
  line-height: 70px;
  margin-left: 10px;
  border: 1px solid bisque;
}
.circle:nth-of-type(4) {
  margin-right: 10px;
}
.tabdi {
  display: flex;
  flex-flow: row;
  height: 45px;
  line-height: 45px;
  margin-top: 20px;
  margin-top: 30px;
}
.tabdiA {
  flex: 1;
  text-align: right;
}
.tabdiA img {
  width: 25px;
  height: 25px;
  margin-top: 10px;
  margin-right: 5px;
}
.tabdiB {
  flex: 1;
  text-align: left;
}
.tabpA {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-flow: row;
  height: 50px;
}
.tabpA button {
  flex: 1;
  display: flex;
}
.tabpA button span {
  flex: 1;
}
.tabpA button span:nth-of-type(1) {
  text-align: right;
  margin: 10px;
}
.tabpA button span:nth-of-type(2) {
  text-align: left;
  margin: 10px;
  margin-top: 15px;
}
.tabpA button img {
  width: 25px;
  height: 25px;
}
.hiddenInput {
  display: none;
}
.caption {
  font-weight: 600;
  text-align: center;
  font-size: 16px;
}
.left-img img {
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>

